<!DOCTYPE html>
<html>
<head>
  <title>Customer's Information</title>
  <style>
    table {
      border-collapse: collapse;
    }
    
    td {
      border: 1px solid black;
      padding: 5px;
      text-align: center;
    }
    
    .highlight {
      background-color: rgb(145, 225, 219);
    }
  </style>
  <script>
    function fillInput(row) {
      var cells = row.getElementsByTagName('td');
      document.getElementById('companyInput').value = cells[0].innerText;
      document.getElementById('contactInput').value = cells[1].innerText;
      document.getElementById('countryInput').value = cells[2].innerText;
    }
    
    function highlightRow(row) {
      row.style.backgroundColor = 'yellow';  // Change to your preferred highlight color
    }

    function removeHighlight(row) {
      row.style.backgroundColor = 'white';  // Change to your original row color
    }
    function submitForm() {
      // Get the values from the input fields
      var company = document.getElementById("companyInput").value;
      var contact = document.getElementById("contactInput").value;
      var country = document.getElementById("countryInput").value;

      // Do something with the values, such as sending them to a server or updating the UI
      // Example: console.log("Company: " + company + ", Contact: " + contact + ", Country: " + country);
    }

    function resetForm() {
      // Clear the values of the input fields
      document.getElementById("companyInput").value = "";
      document.getElementById("contactInput").value = "";
      document.getElementById("countryInput").value = "";
    }
  </script>
</head>
<body>
  <h1 style="text-align: center;">Customer's Information</h1>
  <p style="text-align: center;">Company:<input type="text" id="companyInput">Contact:<input type="text" id="contactInput">Country:<input type="text" id="countryInput"></p>
  <p style="text-align: center;">
    <button onclick="submitForm()" >Modify</button>
    <button onclick="resetForm()">Reset</button>
  </p>
  <table style="margin: 0 auto;">
    <tr>
      <td style="background-color: rgb(195, 195, 195);">Company</td>
      <td style="background-color: rgb(195, 195, 195);">Contact</td>
      <td style="background-color: rgb(195, 195, 195);">Country</td>
    </tr>
    <!-- Repeat the above row for a total of 7 rows -->
    <tr onmouseover="highlightRow(this)" onmouseout="removeHighlight(this)" onclick="fillInput(this)">
      <td>Company1</td>
      <td>Contact1</td>
      <td>Country1</td>
    </tr>

    <tr onmouseover="highlightRow(this)" onmouseout="removeHighlight(this)" onclick="fillInput(this)">
      <td>Company1</td>
      <td>Contact1</td>
      <td>Country1</td>
    </tr>

    <tr onmouseover="highlightRow(this)" onmouseout="removeHighlight(this)" onclick="fillInput(this)">
      <td>Company1</td>
      <td>Contact1</td>
      <td>Country1</td>
    </tr>

    <tr onmouseover="highlightRow(this)" onmouseout="removeHighlight(this)" onclick="fillInput(this)">
      <td>Company1</td>
      <td>Contact1</td>
      <td>Country1</td>
    </tr>

    <tr onmouseover="highlightRow(this)" onmouseout="removeHighlight(this)" onclick="fillInput(this)">
      <td>Company1</td>
      <td>Contact1</td>
      <td>Country1</td>
    </tr>

    <tr onmouseover="highlightRow(this)" onmouseout="removeHighlight(this)" onclick="fillInput(this)">
      <td>Company1</td>
      <td>Contact1</td>
      <td>Country1</td>
    </tr>
  </table>
</body>
</html>